<template>
  <div class="footer wow fadeInLeft top_circle">
    <div class="center_circle">
      <FooterCircle></FooterCircle>
    </div>
    <WebCon>
      <div class="text-white foot_con flex flex-wrap pt-20">
        <div class="left w-1/3">
          <div class="flex">
            <img class="w-20 object-contain" src="~/assets/img/icon/logo.png" alt="" />
            <div class="ml-2">
              <h2 class="text-8xl">{{ appConfig.title }}</h2>
              <p class="text-sm text-white/80">{{ appConfig.titleen }}</p>
            </div>
          </div>
          <p class="text-white/80 text-xl mt-4">精准驱动品牌影响力与商业价值的持续增长</p>
          <div>
            <img
              class="w-44 ml-16 mt-6 person_animate"
              src="~/assets/img/icon/footer_person.png"
              alt=""
            />
          </div>

          <div class="flex w-80 h-12 mt-6 relative rounded-[30px] overflow-hidden">
            <input
              type="text"
              class="w-full border-none pl-4 focus:border-theme outline-none text-theme"
              placeholder="输入您的邮箱"
            />
            <div
              class="btn absolute h-full right-0 line_btn rounded-[30px] px-10 flex items-center justify-center"
            >
              订阅
            </div>
          </div>
          <div class="flex cursor-pointer items-center mt-4" @click="toggleCheck">
            <span
              :class="
                $cn(
                  'check cursor-pointer flex items-center border border-white w-4 h-4 rounded-full',
                  {
                    'bg-theme border-theme': isCheck,
                  }
                )
              "
            >
              <SvgIcon v-if="isCheck" name="duihao" class="text-white" />
            </span>
            <span class="ml-2 text-sm">同意接收如棠科技的最新资讯</span>
          </div>
        </div>
        <div class="cneter w-1/3">fas</div>
        <div class="right w-1/3">fas</div>
      </div>
    </WebCon>
    <div class="mt-24 h-px bg-white/30"></div>
    <div class="py-4 text-center text-white/40">
      成都如棠科技公司版权所有 备案号：蜀ICP备2023002394号-2
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { friendlyLink } from "~/api";
const isCheck = ref(false);
const toggleCheck = () => {
  isCheck.value = !isCheck.value;
};
</script>
<style lang="scss" scoped>
.footer {
  background-image: url("~/assets/img/footer_bac.png");
  background-size: cover;
  .center_circle {
    position: absolute;
    left: 50%;
    margin: auto;
    transform: translateX(-50%) translateY(-50%);
  }
  .foot_con {
    font-family: zcoolwenyiti;
  }
  .person_animate {
    animation: bounce 4s infinite;

    @keyframes bounce {
      0%,
      100% {
        transform: translateY(-10px);
        // animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }
      50% {
        transform: translateY(10px);
        // animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }
  }
}
</style>
